<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Use cases: Split Navigation</title>

    <style>
      body {
        font:
          1.2em Helvetica,
          Arial,
          sans-serif;
        margin: 20px;
        padding: 0;
      }

      textarea {
        font-family: monospace;
        display: block;
        margin-bottom: 10px;
        height: 160px;
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        color: #4d4e53;
        width: 90%;
        max-width: 700px;
        padding: 10px 10px 0px;
        font-size: 90%;
      }

      textarea:nth-of-type(1) {
        height: 230px;
      }

      textarea:nth-of-type(2) {
        height: 160px;
      }

      .playable-buttons {
        text-align: right;
        width: 90%;
        max-width: 700px;
        padding: 5px 10px 5px 26px;
        font-size: 100%;
      }

      section {
        width: 90%;
        max-width: 700px;
        border: 1px solid #4d4e53;
        border-radius: 2px;
        padding: 10px 14px 10px 10px;
        margin-bottom: 10px;
      }

      section input {
        display: block;
        margin: 5px;
      }

      nav {
        border: 2px solid #eeeeee;
      }
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      nav a {
        text-decoration: none;
        color: #000;
        border: 2px solid rgb(96 139 168);
        border-radius: 5px;
        background-color: rgb(96 139 168 / 0.2);
        padding: 10px;
        display: block;
      }
    </style>
    <style class="editable">
      nav ul {
        display: flex;
        gap: 20px;
      }
      .push-right {
        margin-left: auto;
      }
    </style>
  </head>

  <body>
    <section>
      <nav>
        <ul>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3 is longer</a></li>
          <li class="push-right"><a href="#">Page 4</a></li>
        </ul>
      </nav>
    </section>
    <textarea class="playable-css">
nav ul {
  display: flex;
  gap: 20px;
}

.push-right {
  margin-left: auto;
}</textarea
    >
    <textarea id="code" class="playable-html">
<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3 is longer</a></li>
    <li class="push-right"><a href="#">Page 4</a></li>
  </ul>
</nav></textarea
    >
    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script>
    var section = document.querySelector("section");
    var editable = document.querySelector(".editable");
    var textareaHTML = document.querySelector(".playable-html");
    var textareaCSS = document.querySelector(".playable-css");
    var reset = document.getElementById("reset");
    var htmlCode = textareaHTML.value;
    var cssCode = textareaCSS.value;

    function fillCode() {
      editable.innerHTML = textareaCSS.value;
      section.innerHTML = textareaHTML.value;
    }

    reset.addEventListener("click", function () {
      textareaHTML.value = htmlCode;
      textareaCSS.value = cssCode;
      fillCode();
    });

    textareaHTML.addEventListener("input", fillCode);
    textareaCSS.addEventListener("input", fillCode);
    window.addEventListener("load", fillCode);
  </script>
</html>
